<template>
    <div id="bigBox">
        <div class="background">
            <img :src="imgSrc" width="100%" height="100%" alt />
        </div>
        <h1>欢迎使用潇湘大药房</h1>
        <div class="inputBox">
            <div class="inputText">
                <!-- span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。 -->
                <span class="fa fa-user-o" aria-hidden="true"></span>
                <input type="text" placeholder="请输入用户名" v-model="username"/>
            </div>
            <div class="inputText">
                <span class="fa fa-key" aria-hidden="true"></span>
                <input type="password" placeholder="请输入密码" v-model="password"/>
            </div>
            <div>
                <a class="register" v-on:click="Register">没有账号就先注册吧</a>
            </div>
            <input type="button" v-on:click="Login" class="inputButton" value="登录"/>
            <input type="button" class="inputButton" value="忘记密码"/>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                imgSrc: require("../../assets/Loginbackground.jpg"),
                username: '',
                password: ''
            }
        },
        methods: {
            Login() {
                //axios 获取网络
                var that = this
                console.log(this.username)
                this.$axios.post("http://localhost:8088/xiaoxiang/findloginuser", {
                    userName: this.username,
                    password: this.password
                }).then(function (res) { //请求成功
                    //回调方法里的this，只是调用方法体里面的参数，所以需要在外面将this定义好 JQuery
                    console.log(res.data.data)
                    if (res.data.code === 1) {
                        console.log("登录成功")
                        that.$router.push("/HomePage")
                    } else {
                        console.log("登录失败")
                        // window.location.href = 'fail.html'
                    }
                }).catch(function (err) { //请求失败
                    console.log(err)
                })
            },
            Register(){
                console.log("点击了注册")
                this.$router.push("/Logins/Register")
            }
        }
    }
</script>

<style src="../../config/font-awesome-4.7.0/css/font-awesome.css"></style>
<style scoped>
    /*@import "src/config/font-awesome-4.7.0/css/font-awesome.css";*/
    #bigBox .background {
        width: 100%;
        height: 100%;
        /**宽高100%是为了图片铺满屏幕 */
        z-index: -1;
        position: fixed;
        top: 0px;
        /*这里是设置与顶部的距离*/
        left: 0px;
        /*这里是设置与左边的距离*/
        bottom: 0px;
        right: 0px;
    }


    #bigBox {
        margin: 0 auto;
        margin-top: 200px;
        /* 	上内边距和下内边距是 20px
            右内边距和左内边距是 50px */
        padding: 20px 50px;
        background-color: #00000090;
        width: 400px;
        height: 300px;
        /* border-radius这个属性算是非常常用的属性之一了，
        通过设置元素的border-radius值，可以轻松给元素设置圆角边框，
        甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。 */

        /* 常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，
        即可给元素的四个边角设置统一的圆角弧度,根据px的大小来改变 */
        border-radius: 10px;
        text-align: center;
    }

    #bigBox h1 {
        color: white;
    }

    #bigBox .inputBox {
        margin-top: 50px;
    }

    #bigBox .inputBox .inputText {
        margin-top: 20px;
    }

    #bigBox .inputBox .inputText input {
        /* 边框 */
        border: 0;
        padding: 10px 10px;
        /* 设置下边框大小为1px,实线,颜色为白色. */
        border-bottom: 1px solid white;
        background-color: #00000000;
        color: white;
    }

    #bigBox .inputBox .inputText span {
        color: white;
    }

    #bigBox .inputBox .register {
        width: 150px;
        height: 20px;
        margin-top: 20px;
        /* 用了颜色轻柔 */
        background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    }

    #bigBox .inputBox .inputButton {
        border: 0;
        width: 150px;
        height: 20px;
        color: white;
        margin-top: 30px;
        border-radius: 20px;
        /* 用了颜色轻柔 */
        background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    }


</style>